<template>
  <view class="body">
	  <view style="display:flex;justify-content: space-between;align-items: center;width:380px;" >
		  <img src="../../static/发布运动.png" style="width:190px;height:200px;">
		  <view class="display" @click="goPost">运动</view>
	  </view>
    
	 <view style="display:flex;justify-content: space-between;align-items: center;width:380px;" >
		 <img src="../../static/出游.png" style="width:190px;height:200px;">
		  <view class="display" @click="showOptions = true">动态</view>
	 </view>
   
    <view v-if="showOptions" class="options button-container">
      <button class="text-button" @click="goToWord">文字</button>
      <button class="image-button" @click="goToPhoto">图片</button>
      <button class="cancel-button" @click="showOptions = false">取消</button>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      showOptions: false
    };
  },
  methods: {
    goToPhoto() {
      uni.navigateTo({
        url: '/pages/photo/photo' // 根据实际路径调整
      });
      this.showOptions = false;
    },	
	goPost() {
			    uni.navigateTo({
			        url:'/pages/post/post'
			    });
			    this.showOptions = false;
			},
    goToWord() {
      uni.navigateTo({
        url: '/pages/word/word' // 根据实际路径调整
      });
      this.showOptions = false;
    }
  }
};
</script>



<style lang="scss">
	.body {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		width:390px;
		height:700px;
		background-color: #fff;
	}

	.display {
		width: 150px;
		height: 150px;
		margin: 20px 10px;
		border-radius: 50%;
		background-color: #fff;
		line-height: 150px;
		text-align: center;
		font-size: 20px;
		box-shadow: 0 0 20px 10px rgba(126, 195, 255, 0.8),
			/* 内部阴影，用于虚化白色背景与蓝色阴影交界处 */
			inset 0 0 25px 10px rgba(126, 195, 255, 0.4);
		/* 添加蓝色发光阴影 */
	}
.button-container {
  display: flex;
  justify-content: space-between; /* 使按钮有间距 */
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.text-button,
.image-button,
.cancel-button {
  width: 100px;
  height: 40px;
  border: 2px solid #cacaca; /* 灰色边框 */
  border-radius: 10px;
  background-color: #e6e6e6; /* 浅灰色背景 */
  color: #333;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  justify-content: center; /* 文字水平居中 */
  align-items: center; /* 文字垂直居中 */
  transition: all 0.3s ease;
}

.text-button:hover,
.image-button:hover,
.cancel-button:hover {
  background-color: #d4d4d4; /* 悬停时稍深灰色背景 */
  border-color: #c7c7c7;
}

.text-button:active,
.image-button:active,
.cancel-button:active {
  background-color: #d3d3d3; /* 按下时再深一点的灰色背景 */
  border-color: #cecece;
}
</style>
